<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" href="bootstrap/css/bootstrap.css">
    <title>Document</title>
    <style>
        li {
            margin-right: 100px;
            /* 添加元素间隔 */
        }

        .li1 {
            margin-left: 90px;
        }

        body {
            width: 100%;
        }

        div.container {
            width: 70%;
            margin: 0 auto;
            border-radius: 20px;
        }

        button.accordion {
            background-color: rgb(253, 245, 175);
            color: #444;
            cursor: pointer;
            padding: 18px;
            width: 100%;
            border: none;
            text-align: left;
            outline: none;
            font-size: 15px;
            transition: 0.4s;}

            button.accordion.active,
            button.accordion:hover {
                background-color: rgb(255, 199, 166);}

                div.panel {
                    padding: 0 18px;
                    background-color: rgb(252,250, 232);
                    max-height: 0;
                    overflow: hidden;
                    transition: max-height 0.2s ease -out;}
    </style>
</head>

<body>
    <nav class="navbar navbar-expand-lg  bg-light n1">
        <a class="navbar-brand" href="index.html"><img src="img/logo.jpeg" alt="..." height="80px"></a>
        <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarNav"
            aria-controls="navbarNav" aria-expanded="false" aria-label="Toggle navigation">
            <span class="navbar-toggler-icon"></span>
        </button>
        <div class="collapse navbar-collapse " id="navbarNav">
            <ul class="navbar-nav li1">
                <li class="nav-item active ">
                    <a class="nav-link" href="jianjie.html">简介 <span class="sr-only">(current)</span></a>
                </li>
                <li class="nav-item">
                    <a class="nav-link" href="yewu.html">业务</a>
                </li>
                <li class="nav-item">
                    <a class="nav-link" href="esg.html">ESG</a>
                </li>
                <li class="nav-item">
                    <a class="nav-link " href="yuangong.html">员工</a>
                </li>
            </ul>
        </div>
        <form class="form-inline">
            <span id="username" onblur="user()"></span>
            <a href="denglu.html">登录/注册</a>
        </form>
    </nav>
    <div>
        <img src="./img/14.png" alt="" class="w-100" height="350px">
    </div>
    <div class="container" style="margin-top: 100px;">
        <h2>员工活动</h2>
        <p>以丰富多彩的活动，深入人心的文化品牌，将文化的信念不断传承。
        </p>
        <button class="accordion">员工大会</button>
        <div class="panel">
            <p>每年年底举行的员工大会，和新年晚会都是腾讯年度最重要的盛会，员工大会上，向员工传递公司战略、业务布局与管理思路，并表彰优秀团队。</p>
        </div>
        <button class="accordion">公司年会</button>
        <div class="panel">
            <p>自腾讯创立以来，每年年底，全体员工欢聚一堂，凝聚才华与激情创作出一个个精彩的节目，增加同事之间的感情，同时激励员工在新的一年里再接再厉。</p>
        </div>
        <button class="accordion">腾讯文化日</button>
        <div class="panel">
            <p>每年的11月11日，是腾讯的生日，也是所有腾讯人的节日。这一天，全体腾讯员工都会穿着由腾讯人自己设计的特色文化衫，摆出创意造型拍合影，以及参加总办Link Time等传统活动，共同庆祝公司的生日，将文化不断传承下去。

            </p>
        </div>
        <button class="accordion">踏春日</button>
        <div class="panel">
            <p>腾讯在每年的四月，面向员工和家人组织公益徒步活动，不仅强身健体、增进与家人之间的感情，并传递爱与社会责任。

            </p>
        </div>
    </div>
    <div  style="margin-top: 100px; margin-bottom: 10px;">
        <div class="row">
                <ul class="nav" style="margin-left: 150px;">
                    <li class="nav-item" style="text-align: center;">
                        <h4 style="margin-bottom: 20px;"class="c">加入我们</h4><br><br>
                        <a style="margin-top: 20px;"class="c">校园招聘</a><br><br>
                        <a style="margin-top: 20px;"class="c">社会招聘</a><br><br>
                        <a style="margin-top: 20px;"class="c">国际招聘</a>
                    </li>
                    <li class="nav-item" style="text-align: center;">
                        <h4 style="margin-bottom: 20px;">联系我们</h4><br><br>
                        <a href="" class="c">客户服务</a><br><br>
                        <a href="" class="c">合作洽谈</a><br><br>
                        <a href="" class="c">腾讯采购</a><br><br>
                        <a href="luyan.html">您的建议</a>
                    </li>
                    <li class="nav-item" style="text-align: center;">
                        <h4 style="margin-bottom: 20px;">法律信息</h4><br><br>
                        <a href="" class="c">服务协议</a><br><br>
                        <a href="" class="c">隐私政策</a><br><br>
                        <a href="" class="c">知识产权</a>
                    </li>
                    <li>
                        <img src="./img/logo.jpeg" alt="" class="w-100" height="200px">
                    </li>
                </ul>
                
            
        </div>
            
    </div>
    <script>
        var acc=document.querySelectorAll(".accordion")
        for(var i=0;i<acc.length;i++){
            acc[i].onclick=function(){
                this.classList.toggle("active")
                var panel=this.nextElementSibling
                if(panel.style.maxHeight){
                    panel.style.maxHeight=null
                }else{
                    panel.style.maxHeight=panel.scrollHeight+"px"
                }
            }
        }
    </script>
</body>

</html>